<template>
    <TechDialog
        class="unite-order-tip-modal"
        :title="titleValue"
        ref="tip"
        @ok="okAction"
        cancelText="取消"
        :okText="isCancel ? '确定' : '确认付款'"
        :mode="mode"
        :theme="theme"
        :styleMode="styleMode"
        container="body"
    >
        <div class="unite-list-group">
            <div class="unit-item" v-for="(item, index) in uniteOrderInfo.orders" :key="index">
                <div class="item-name">{{unitTitle(item)}}</div>
                <div class="item-price">
                    <span class="label">￥</span>{{item.trans.toFixed(2)}}
                </div>
            </div>
        </div>
    </TechDialog>
</template>

<script>
import { TechDialog } from '@components/base';
import { DELIVERY_TYPE_TEXT } from '@constants/shop';
import ModeMixin from '@common/mixin';
export default {
    name: 'UniteOrderTip',
    mixins: [ModeMixin],
    components: {
        TechDialog,
    },
    props: {
        requestId: {
            type: String,
            default: '',
        },
        uniteOrderInfo: {
            type: Object,
            default: () => {},
        },
        isCancel: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        titleValue() {
            const { uniteOrderInfo, isCancel } = this.$props;
            return isCancel ? `以下${uniteOrderInfo.count}笔订单确定同时取消？` : `以下${uniteOrderInfo.count}笔订单需一起支付`;
        },
        unitTitle() {
            return item => {
                return `${item.warehouse_name}${DELIVERY_TYPE_TEXT[item.delivery_type]}订单，共${item.prod_count}件商品`;
            };
        },
    },
    methods: {
        okAction() {
            const { isCancel } = this.$props;
            if (isCancel) {
                // 取消订单
                this.$emit('cancel');
            } else {
                // 支付订单
                this.$emit('pay');
            }
        },
        show() {
            this.$refs.tip.show();
        },
    },
};
</script>

<style lang="less">
.unite-order-tip-modal {
    .dialog-content {
        width: 100%;
        display: flex;
    }
    .unite-list-group {
        .flex-column();
        flex: 1;
        width: 100%;
        .unit-item {
            .flex-row-between();
            .m-h(24);
            .m-b(@shop-gap-md);
            font-size: @font-size;
            color: @tip-color;
            &:last-child {
                .m-b(0);
            }
            .item-name {
                max-width: 70%;
                line-height: 19px;
            }
            .item-price {
                font-weight: 500;
                font-family: @font-family-number;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
}
</style>
